<script setup lang="ts">
import { getPayAPI } from '@/services/consult'
import { showLoadingToast, showToast } from 'vant'
import { ref } from 'vue'
// const { orderID, showBottom, actualPayment, closeSheet, payCallback } =
const props = defineProps<{
  orderID?: string | null
  showBottom: boolean
  actualPayment: number
  closeSheet?: () => void
  payCallback: string
}>()
const emits = defineEmits<{
  (e: 'update:showBottom', showBottom: boolean): void
}>()

// 支付方式
const payWay = ref<0 | 1>()
// 立即支付，将会从后台中获取支付的url地址
const pay = async () => {
  console.log(props.orderID, 'orderId')
  if (payWay.value === undefined) return showToast('请选择支付方式')
  if (payWay.value !== undefined && props.orderID) {
    showLoadingToast('正在跳转支付...')
    const { data } = await getPayAPI({
      paymentMethod: payWay.value,
      orderId: props.orderID,
      payCallback: import.meta.env.VITE_APP_CALLBACK + props.payCallback
    })
    location.href = data.payUrl
  }
}
</script>

<template>
  <van-action-sheet
    :show="props.showBottom"
    @update:show="emits('update:showBottom', !props.showBottom)"
    title="选择支付方式"
    :closeable="false"
    :before-close="closeSheet"
    :close-on-popstate="false"
  >
    <div class="pay-type">
      <p class="amount">￥{{ props.actualPayment.toFixed(2) }}</p>
      <van-cell-group>
        <van-cell title="微信支付" center @click="payWay = 0">
          <template #icon>
            <DP-Icon name="consult-wechat" class="cp-icon"></DP-Icon>
          </template>
          <template #right-icon>
            <van-checkbox :checked="payWay === 0"></van-checkbox>
          </template>
        </van-cell>
        <van-cell title="支付宝支付" center @click="payWay = 1">
          <template #icon>
            <DP-Icon name="consult-alipay" class="cp-icon"></DP-Icon>
          </template>
          <template #right-icon>
            <van-checkbox :checked="payWay === 1"></van-checkbox>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <div class="btn-pay">
      <van-button type="primary" block round @click="pay">立即支付</van-button>
    </div>
  </van-action-sheet>
</template>

<style lang="scss" scoped>
.pay-type {
  .amount {
    padding: 20px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
  }
  .van-cell {
    align-items: center;
    .cp-icon {
      margin-right: 10px;
      font-size: 18px;
    }
  }
}
.btn-pay {
  padding: 15px;
}
</style>
